<template>
  <div class="breadcrumbBox">
    <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
      <transition-group enter-active-class="animate__animated animate__fadeInRight">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
          <span
            v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
            class="color-gray-400"
            >{{ translateRouteTitle(item.meta.title) }}</span
          >
          <a v-else @click.prevent="handleLink(item)">
            {{ translateRouteTitle(item.meta.title) }}
          </a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>
<script setup lang="ts">
import type { RouteLocationMatched } from 'vue-router'
import { useRoute } from 'vue-router'
import { compile } from 'path-to-regexp'
import router from '@/router'
import { translateRouteTitle } from '@/utils/i18n'

const currentRoute = useRoute()

const pathCompile = (path: string) => {
  const { params } = currentRoute
  const toPath = compile(path)
  return toPath(params)
}
const breadcrumbs = ref<Array<RouteLocationMatched>>([])
function getBreadcrumb() {
  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
  const first = matched[0]
  if (!isDashboard(first)) {
    matched = [{ path: '/dashboard', meta: { title: 'dashboard' } } as any].concat(matched)
  }
  breadcrumbs.value = matched.filter((item) => {
    return item.meta && item.meta.title && item.meta.breadcrumb !== false
  })
}

function isDashboard(route: RouteLocationMatched) {
  const name = route && route.name
  if (!name) {
    return false
  }
  return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
}

function handleLink(item: any) {
  const { redirect, path } = item
  if (redirect) {
    router.push(redirect).catch((err) => {
      console.warn(err)
    })
    return
  }
  router.push(pathCompile(path)).catch((err) => {
    console.warn(err)
  })
}

watch(
  () => currentRoute.path,
  (path) => {
    if (path.startsWith('/redirect/')) {
      return
    }
    getBreadcrumb()
  }
)

onBeforeMount(() => {
  getBreadcrumb()
})
</script>
<style lang="scss" scoped>
.color-gray-400 {
  --un-text-opacity: 1;
  color: rgb(156 163 175 / var(--un-text-opacity));
}
.breadcrumbBox {
  .breadcrumb {
    display: flex;
    align-items: center;
  }
}
</style>
